<template>
    <div class="upbox">
        <h2 class="title">修改个人信息</h2>
        <div class="cont" v-for='user in Userinfo' :key='user.Uid' 
                        v-if='(user.Uid == uid)'>
            <form action="">
                <div class="input-text clearFix">
                    <span class="pwd">手机号:</span>
                    <input
                        type="text"
                        placeholder="请输入账号"
                        v-model="useraccount"
                    />
                    <!--  -->
                </div>
                <div class="input-text clearFix">
                    <span class="pwd">昵称:</span>
                    <input
                        type="text"
                        placeholder="请输入昵称"
                        v-model="nikename"
                    />
                    <!--  -->
                </div>
                <div class="input-text clearFix">
                    <span class="pwd">密码:</span>
                    <input
                        type="text"
                        placeholder="请输入密码"
                        v-model="userpsw"
                    />
                    <!--  -->
                </div>
                <div class="input-text clearFix">
                    <span class="pwd">年龄:</span>
                    <input
                        type="text"
                        placeholder="请输入年龄"
                        v-model="userage"
                    />
                    <!--  -->
                </div>
            </form>
            <!-- <div class="btn_sub"> -->
                <button type="submit" class="btn_sub"  @click="updataInfo">
                    确认修改
                </button>
            <!-- </div>-->
        </div>
    </div>
</template>

<script>
import axios from "axios"

    export default{
        uid:(localStorage.getItem("userId")),
        data(){
            return{ 
                nikename:'',
                useraccount:'',
                userpsw:'',
                userage:'',
                Userinfo: [],
                uid:localStorage.getItem("userId")
            }
        },
    mounted(){
        this.getList();
        console.log("UID:",this.uid);
    },
    methods:{
        updataInfo(){
            let p={
                UserAccount : this.useraccount,
                NikeName:this.nikename,
                UserPsw:this.userpsw,
                UserAge:this.userage,
                Uid:this.uid
            }
            console.log(p);
            this.$axios.get('http://localhost:3000/api/updinfo',{params:p}).then(res=>{
                if(this.NikeName=='')
                {
                    this.$message({
                        type:'error',
                        message:'请输入昵称'
                    })
                };
                if(this.UserAccount=='')
                {
                    this.$message({
                        type:'error',
                        message:'请输入账号'
                    })
                };
                if(this.UserPsw=='')
                {
                    this.$message({
                        type:'error',
                        message:'请输入密码'
                    })
                };
                if(this.UserAge=='')
                {
                    this.$message({
                        type:'error',
                        message:'请输入年龄'
                    })
                };
                if(res.data.code==1){
                    this.$message({
                        type:'success',
                        message:'修改成功'
                })
                    this.$router.push({path:'/userinfo'});
                }
                else{
                    this.$message.error(res.mes)
                }
            })
        },
        getList(){           
            axios.get("http://localhost:3000/api/userinfo")
			.then(res =>{
			    console.log(res.data);
			    this.Userinfo = res.data;
			    console.log(this.Userinfo);
			})
        }
    }
    }

</script>

<style scoped>
.upbox{
    width: 60%;

    margin:auto 20%;
    background-image: url('../assets/images/6.png');
}
h2{
    text-align: center;
}
.btn_sub{
    background-color: #e1251b;
    padding: 6px;
    border-radius: 0;
    font-size: 16px;
    font-family: 微软雅黑;
    word-spacing: 4px;
    border: 1px solid #e1251b;
    color: #fff;
    width: 50%;
    height: 36px;
    margin-top: 25px;
     margin-left: 29%;
     outline: none;
}
.btn_sub:hover{
  background-color: rgb(233, 175, 99);
}
form{
    padding-left: 30%;
}
.pwd{
  font-size: 18px;
  line-height: 36px;
  font-family: 微软雅黑;
  float: left;
  width: 80px;
  height: 32px;
  box-sizing: border-box;
  border-radius: 2px 0 0 2px;
  margin-left: 10%;
}
input {
  width: 270px;
  height: 38px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  /* border-left: none; */
  font-size: 14px;
  line-height: 22px;
  margin:auto 2% ;
  border-radius: 0 2px 2px 0;
  outline: none;
}
@media screen and (max-width:768px){
            /* 手机屏幕 */
    
    }
   @media screen and (max-width:992px) and (min-width:768px){
            /* 平板 */

           
    }
</style>